<template>
  <div>
    <h3>detail{{ type }}</h3>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'Detail'
  })
</script>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import{computed,watch} from "vue"
/* 
  useRoute
    返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。
    只要动态路由参数发生改变,route对象就会随之改变
*/
  const router= useRoute()

  // 动态的获取动态路由参数
  const type = computed(()=>{
    return router.params.type
  })

  watch(router,()=>{
    console.log('router变了',router.params.type);
    
  })
</script>

<style lang="scss" scoped>
  
</style>